import React from 'react';
import { Button } from 'antd';
import { ModalForm, ProFormText, ProFormTextArea, ProFormUploadButton } from '@ant-design/pro-form';
import { PlusOutlined } from '@ant-design/icons';
import styles from '@/pages/collection/MyCollectionList/index.less';

const CreateCollection = (props) => {
  const { onFinish } = props;

  return (
    <ModalForm
      title="创建收藏"
      trigger={
        <Button type="dashed" className={styles.newButton}>
          <PlusOutlined />
          创建收藏
        </Button>
      }
      onFinish={onFinish}
    >
      <ProFormText
        name="name"
        label={'名称'}
        placeholder={'名称'}
        rules={[
          {
            required: true,
            message: '请输入名称',
          },
        ]}
      />
      <ProFormTextArea name="description" label={'介绍信息'} placeholder={'介绍信息'} rows={4} />
      <ProFormUploadButton
        name="logo"
        label="封面"
        accept="image/png, image/jpeg"
        max={1}
        fieldProps={{
          listType: 'picture-card',
        }}
      />
    </ModalForm>
  );
};

export default CreateCollection;
